Five JavaScript Tips for FrontPage Web Developers

 

Lisa Wollin
Microsoft Corporation

February 2005

Applies to:
    Microsoft Office FrontPage 2003
    Microsoft FrontPage 2002
    Microsoft FrontPage 2000

Summary:   Learn five ways you can use JavaScript to enhance your Web site: open a new window of a specific size, close a window, use a drop-down list to link to other pages, create mouseover effects, and insert dates and times. These tips were previously published in the FrontPage Developers Blog. (12 printed pages)

Contents

Introduction to JavaScript Tips for FrontPage
Open a Page in a New Window of a Specific Size
Using Script to Close a Window
Creating a Drop-Down List that Links to Other Pages
Creating Mouseover Effects
Inserting Dates and Times
Conclusion
Additional Resources

Introduction to JavaScript Tips for FrontPage

If you have surfed the Internet for any length of time, you have likely seen a variety of Web sites with some very cool features. More often than not, those cool features are created using JavaScript. This article expands on the five most popular JavaScript tips that were published in 2004 in the FrontPage Developers Blog.

Note   If you have Microsoft FrontPage 2003, you can use the Behaviors feature to insert scripts that perform many of the functions that are included in this article.

All of the scripts included in this article work in Microsoft Internet Explorer; however, a few may not work in other browsers. You should test your pages in all browsers that your target audience might use to ensure that your pages function as expected.

One important note to remember when using JavaScript is that most browsers allow users to turn off client-side scripting. In addition, recent security updates for Internet Explorer may disable all client-side scripts by default. For more information on security issues related to JavaScript, see JavaScript Security, an excerpt from JavaScript: The Complete Reference, second edition, from McGraw-Hill/Osborne.

Note   Netscape developed the JavaScript programming language. JScript is the Microsoft implementation of ECMAScript, as defined by the specification from Ecma International. Both JavaScript and JScript are ECMAScript-compliant scripting languages. However, JScript can run only in Internet Explorer and a few non-Microsoft browsers; JavaScript can run in most script-enabled browsers and on platforms other than Microsoft Windows.

Open a Page in a New Window of a Specific Size

You have seen sites that do this. Perhaps your financial site opens a smaller window to display a list of definitions, or maybe your favorite online bookstore opens a new, fixed-size window to show pictures of book covers. Now you want to do the same on your own site. Of course, you likely already know that you can use the target attribute of an A element to open a page in a new browser window, but it will be the same size as other browser windows.

The code to open a page in a new window of a specific size is fairly simple, and you can accomplish the task in multiple ways. One way uses the open method, another way uses the showModalDialog method, and a third way uses the showModelessDialog method. In addition to opening a page in a new, sized window, you can prohibit users from resizing the window, and you can remove the menu bar, address bar, status bar, or scroll bars. You can even specify where you want the window positioned on the screen. The following sections show you how to use these methods.

Note   The showModalDialog and showModelessDialog methods apply to Microsoft Internet Explorer only and do not function in other browsers. You should use them only if you are confident that everyone in your target audience uses Internet Explorer, such as in an intranet site on a corporate network.

open Method

The open method does just that: it opens a new page. Similar to the navigate method, by default the open method opens the page in the current browser window. However, unlike the navigate method, the open method also has parameters that cause the page to open in a new window and that specify the appearance of that window. The open method has the following signature:

window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

If you view the help topic for the open method, you can get specific information about each of the parameters, but here are the basics:

• sURL is the address for the new page.
• sName is the value of the target attribute for an A element; which for this tip is "_blank" to open a new window, but which could be the name of a frame or another open window.
• sFeatures specifies the display options for the window, including position (top and left) and size (height and width). For a complete list of possible values, see the help topic for the open method.
• bReplace specifies whether the new URL is added to or replaces an item in the browser's history list.

For this tip, you use the first three parameters and omit the fourth.

The following code opens a new browser window that is 340 pixels high and 240 pixels wide and displays the Microsoft home page.

function openNewWindow()
{
   window.open("http://www.microsoft.com", "_blank",
      "height=340px width=240px");
}

You can add options to the sFeatures parameter string to hide the status bar, hide the scroll bars, prohibit resizing the window, and more. All you need to do is add them to the sFeatures parameter string, separating each name=value pair with a space. For example, the following code positions the new window in the upper left corner of the screen and disables resizing of the window.

function openNewWindow()
{
   window.open("http://www.microsoft.com", "_blank",
      "height=340px width=240px top=0 left=0 resizable=no scrollbars=yes");
}

showModalDialog Method

The showModalDialog method is another way to show a page in a new window of a specific size, but when you use the showModalDialog method, the user can't return to the first window until he or she closes the window, as with a modal dialog box in a Windows application. This is especially useful when you need you need to return values from the dialog. When you use the showModalDialog method to open a new window, the new browser window cannot be resized unless you specify otherwise using the sFeatures parameter. The signature for the showModalDialog method is as follows:

window.showModalDialog(sURL [, vArguments] [, sFeatures])

If you look at the help topic for the showModalDialog method, you get specific information about each of the parameters, but here are the basics:

• sURL is the address for the new page.
• vArguments passes values to the dialog box. For more information on passing values into and retrieving values from modal dialog boxes, see the following section.
• sFeatures specifies the display options for the dialog box, such as height, width, and whether to show the help button, scroll bars, or menu bar.

The following code opens a new browser window that is 340 pixels high and 240 pixels wide and opens the Microsoft home page. You can add additional dialog box features by adding them to the sFeatures string, separating each name:value pair with a semicolon. The help topic for the showModalDialog method lists all the features and possible values.

function openNewWindow()
{
   window.showModalDialog("http://www.microsoft.com", "", 
      "dialogHeight:340px; dialogWidth:240px")
}

Passing Values into and Retrieving Values from Dialog Boxes

As mentioned earlier, one advantage of using the showModalDialog method is that you can pass values into and retrieve values from the dialog box. Using the vArguments parameter, you can pass values to the dialog box that it needs for processing.

For example, say you have an order form and are using a dialog box to show possible shipping methods and costs. Depending on the state or country to which a customer is shipping an order, the shipping methods and costs may change. You can use the vArguments parameter to pass a number that indicates the shipping level (for example, 1 is in state, 2 is out of state, and 3 is out of the country).

You can capture values passed to a dialog box by using the dialogArguments property from the page displayed in the dialog box window. When the user is finished with the dialog box, you use the returnValue property to pass values back to the original form. Use the following steps to see this in action.

1. Start FrontPage and create two pages.

2. Switch to Code view. In the HEAD section of the first page, add the following code:

   <script language="JavaScript">
   function openNewWindow()
   {
      var s = window.showModalDialog("dialog.htm", "test argument", 
         "dialogHeight:340px; dialogWidth:240px");
      document.write(s);
   }
   </script>
   

3. In the BODY section of the first page, add the following code:

   <input type="button" onclick="javascript:openNewWindow();" value="Click Here">
   

4. Save the first page as ShowModalDialog.htm.

5. Switch to the second page, and switch to Code view if necessary.

6. In the HEAD section of the second page, add the following code:

   <script language="JavaScript">
   function RetrieveDialogArguments()
   {
      var s = window.dialogArguments;
      document.write(s)
   }
   
   function ReturnDialogArguments()
   {
      window.returnValue="sample return value";
   }
   </script>
   

7. Replace the opening <body> tag with the following code:

   <body onload="RetrieveDialogArguments();" onunload="ReturnDialogArguments()">
   

8. Save the page as dialog.htm.

9. Switch back to the first page, ShowModalDialog.htm, and display the page in the browser (press F12).

When the first page appears in Internet Explorer, click the button. The second page displays the value of the arguments passed in, which in this case is "test argument." Close the dialog box (the second page), and the first page displays the value of the returnValue property, which in this case is "sample return value."

This example is, of course, very simple, but it effectively shows how values are passed between pages and dialog boxes.

Important   Do not use either the ShowModalDialog or the ShowModelessDialog method (discussed in the following section) to pass user names, account numbers, passwords, or other sensitive data. Data passed using these two methods is transmitted as clear text and is therefore not secure.

showModelessDialog Method

The showModelessDialog method is similar to the showModalDialog method except that the user can move between the first page and the modeless dialog window. As with the showModalDialog method, when you use the showModelessDialog method to open a new window, the new browser window cannot be resized unless you specify otherwise by using the sFeatures parameter, and the dialog box always stays on top, although the user can switch between the page and the dialog box.

The signature for the showModelessDialog method is as follows:

window.showModelessDialog(sURL [, vArguments] [, sFeatures])

Notice that the signature for the showModelessDialog method is the same as the showModalDialog method. The help topic for the showModelessDialog method provides more detailed information about each of the parameters and the possible values.

The following code opens a new browser window that is 340 pixels high and 240 pixels wide and opens the Microsoft home page.

function openNewWindow()
{
   window.showModelessDialog("http://www.microsoft.com", "",
      "dialogHeight:340px; dialogWidth:240px")
}

You can pass values to the modeless dialog box by using the vArguments parameter. The process for passing values to and retrieving values from a modeless dialog box is the same as for a modal dialog box, as discussed in the section Passing Values into and Retrieving Values from Dialog Boxes.

Using Script to Close a Window

After a window opens, what does the user do when she or he is done with it? Generally, the user clicks the red X in the title bar to close the window, but many sites provide a button that visitors can click to close the window. Closing a window using script is easy. The following code creates a button that, when clicked, calls the close method of the window object.

<button onclick="javascript:window.close()">Close</button>

Alternatively, you can close the window by using an A element and putting the JavaScript code in the href attribute, as shown in the following code. This code also uses the close method of the window object.

<a href="javascript:window.close()">Close</a>

One thing that you should know about using the close method is that it may not work properly, if at all, unless the window was opened by using a script. In Internet Explorer, if you use the close method on a window that was not opened by using a script, Internet Explorer displays a message asking visitors whether they want to close the window. In Netscape Navigator and Mozilla, the code does not work at all, and the JavaScript console displays the message "Scripts may not close windows that were not opened by script." So these examples work best in pages displayed in windows that use script code similar to the code shown in the previous section.

Creating a Drop-Down List that Links to Other Pages

You've seen them. All the big Web sites have them. Now you want one, too. Perhaps you have translated versions of your site and you want a cover page with a drop-down list that contains the different languages into which your Web site is translated so that visitors can select the language they want to view. Maybe you want to use a drop-down list for navigation for your site or to provide easy access to online search engines.

Two kinds of drop-down lists hyperlink to other pages: one, the page changes when the selection changes; two, the page changes when the visitor clicks a button. Both of these kinds are shown in the following sections. Both use the same function, goToPage, to open the new page.

The following code shows the goToPage function that the drop-down lists shown in this section use. This code uses the open method to open the page specified in the url parameter, but you could also use the navigate method.

<script language="JavaScript">
function goToPage(url)
{
   if (url != "")
   {
      window.open(url);
   }
}
</script>

Page Changes When the Selection Changes

With a drop-down list that automatically opens a new page, the user doesn't need to do anything except select the item from the drop-down list to open the page. The following code contains the HTML for creating a drop-down list. In this example, the onchange event for the list calls the goToPage function shown previously and passes the value attribute of the selected item (OPTION element).

<form>
   <label><u>S</u>earch Engines</label>
   <select accesskey="S" 
      onchange="goToPage(this.options(this.selectedIndex).value)">
      <option selected>Please select one</option>
      <option value="http://search.msn.com/">MSN Search</option>
      <option value="http://www.google.com/">Google</option>
      <option value="http://www.search.com/">Search.com</option>
      <option value="http://www.dogpile.com/">Dogpile</option>
   </select>
<form>

Page Changes When the User Clicks a Button

Creating a drop-down list that uses a Go button is just as simple. The user selects an item from the drop-down list and clicks Go, and the new page opens. The following code contains the HTML to create this drop-down list. The main differences between this code and the code in the previous example are as follows:

• The SELECT element in this code doesn't contain the onchange event.
• This code contains a BUTTON element for the Go button.
• This code provides a value for the name attribute of the FORM and SELECT elements, which are necessary for the script to function properly.

<form name="dropdown">
   <label>Search <u>E</u>ngines</label>
   <select name="list" accesskey="E">
      <option selected>Please select one</option>
      <option value="http://search.msn.com/">MSN Search</option>
      <option value="http://www.google.com/">Google</option>
      <option value="http://www.search.com/">Search.com</option>
      <option value="http://www.dogpile.com/">Dogpile</option>
   </select>
   <button onclick="goToPage(document.dropdown.list.options(
      document.dropdown.list.selectedIndex).value)">Go</button>
</form>

To use this code, paste the script in the HEAD section of a page and paste the form (with the nested elements) where you want the drop-down list to appear on your page. However, do not nest the form inside another FORM element.

After you place the drop-down list where you want it to appear, you can change text displayed and the value attribute for each OPTION element in the SELECT element as needed. The value attribute for each OPTION element should contain a valid URL, including the "http://" prefix.

Creating Mouseover Effects

People frequently ask how to create mouseover effects. In fact, mouseover effects are probably one of the most common, if not the most common, uses for JavaScript on the Internet. There are a variety of different mouseover effects, and the scripts that accomplish them are varied.

Mouseover Example is a page for selling a house. The page shows an image of a house plan; the house plan image contains an image map that displays an image of the room when a user moves the mouse pointer over a mapped area.

Note   You can easily create an image map in FrontPage (see Add a hot spot to a graphic); however, you will need to add the onmouseover event to each AREA element by hand.

Creating this type of mouseover is relatively easy. The page contains two images: one image is the main, mapped image (which in this example is the image of the house plan); the other image (which initially shows the front of the house) changes when a user passes the mouse pointer over a mapped area.

The first image, the picture of the house plan, is mapped according to rooms in the house; each of the rooms has an AREA element with an href attribute that contains the path and file name of the image of the room and an onmouseover event that calls a JavaScript function. The onmouseover event, as shown in the following code, passes the value of the href attribute of the AREA element into the JavaScript function.

onmouseover="ShowPic(this.href)"

The second image, the picture of the front of the house, is actually a container image. When the page first appears, it shows the front of the house, but as the user moves the mouse pointer over the house plan, the picture of the front of the house changes to show a picture of the room over which the mouse pointer rests. (Depending on the speed of your connection, you may need to wait a few seconds for the image to download.)

The script that makes changes the image of the front of the house to an image of a room comprises one line and is shown in the following code.

function ShowPic(sImage)
{
   document.ShowRoom.src = sImage;
}

The ShowPic function takes a string (sImage), which is the path to the image of the room, as contained in value of the href attribute of the AREA element that maps to the room. The script then changes the src property (which changes the src attribute of an IMG element named ShowRoom) to the value of the sImage string.

Note   The example in this section uses the onmouseover event to run the mouseover script. You may want to revert to a different image when a user moves the mouse pointer away. In this case, use the onmouseout event.

Inserting Dates and Times

You can get the current date onto your Web pages in a couple of ways. One uses client-side JavaScript, the other uses server-side code. As always, each approach has advantages and disadvantages. The code provided here is client-side JavaScript because generally you want the user to see the date on the local computer. Server-side code takes the date from the server, which could be all the way on the other side of the world. The only disadvantage to JavaScript is that users can turn off scripting in their browsers. However, if they do so, the worst that happens is that visitors don't see the date.

To use any of the date formats shown in the following sections, simply insert the code you want into a script block in the HEAD section of your page, and put an inline script block, similar to the following, that names the function, where "GetTodaysDate" in the following example is the name of the function.

<script language="JavaScript">document.write(GetTodaysDate());</script>

Short Date: 6/11/2005

This function displays the current date in short format:

function GetTodaysDate(){
   var oDate = new Date();
   var sDate = oDate.getMonth() + "/" + 
      oDate.getDate() + "/" + oDate.getYear()
   return sDate;
}

Long Day of Week and Short Date: Friday, 6/11/2005

This function displays the day of the week and then the current date in short format:

function GetTodaysDayAndDate(){
   var oDate = new Date();
   var iDay = oDate.getDay();
   var sDay;
 
   switch (iDay){
      case (0) :{sDay = "Sunday"; break;}
      case (1) :{sDay = "Monday"; break;}
      case (2) :{sDay = "Tuesday"; break;}
      case (3) :{sDay = "Wednesday"; break;}
      case (4) :{sDay = "Thursday"; break;}
      case (5) :{sDay = "Friday"; break;}
      case (6) :{sDay = "Saturday"; break;}
   }
   var sDate = oDate.getMonth() + "/" + 
      oDate.getDate() + "/" + oDate.getYear()
   return sDay + ", " + sDate;
}

Short Day of Week and Medium Date: Fri Jun 11 2005

This function displays the day of the week and then the current date in medium format:

function GetTodaysDateLongFormat(){
   var oDate = new Date();
   var sDate = oDate.toDateString();
   return sDate;
}

24-Hour Time: 17:32

This function shows the time in short military (24-hour) format:

function GetTime(){
   var oDate = new Date();
   var sTime = oDate.getHours() + ":" + oDate.getMinutes();
   return sTime;
}

12-Hour Time: 5:32 PM

This function shows the time in medium AM/PM (12-hour) format:

function GetTimeLong(){
   var oDate = new Date();
   var iHour = oDate.getHours();
   var sAmPm;
 
   if (iHour < 13)
   {
      sAmPm = "AM";
   }
   else
   {
      iHour = iHour - 12;
      sAmPm = "PM";
   }
   var sTime = iHour + ":" + oDate.getMinutes() + " " + sAmPm;
   return sTime;
}

Short Date and Medium Time: 6/11/2005, 5:32 PM

This function shows date and time.

function GetDateTime(){
   var oDate = new Date();
   var sDate = oDate.getMonth() + 1 + "/" + 
      oDate.getDate() + "/" + oDate.getYear();
   var iHour = oDate.getHours();
   var sAmPm;
 
   if (iHour < 13)
   {
      sAmPm = "AM";
   }
   else
   {
      iHour = iHour - 12;
      sAmPm = "PM";
   }
   var sTime = iHour + ":" + oDate.getMinutes() + " " + sAmPm;
   
   return sDate + ", " + sTime;
}

The preceding examples provide dates and times in US date and time formats. However, you can provide dates and times in international formats. JavaScript provides three methods that you can use to display dates and times in the local date and time formats: toLocaleString method, toLocaleDateString method, and toLocaleTimeString method. All of these methods return the date and/or time in the format on the clients computer. You can easily modify the GetTodaysDateLongFormat function shown previously to use the local date and time format by substituting one of these methods for the toDateString method. These methods actually make the code much simpler and more flexible than trying to parse the date and time and modifying it to fit a specific format.

Conclusion

You can accomplish many tasks with JavaScript, and there are numerous sites online where you can find both ready-made scripts and tips for creating your own scripts. The previous examples just get you started. In addition, as you create your own custom scripts, you can create FrontPage behaviors to insert those scripts into and manage scripts in your Web pages. For more information, the following section provides links to useful online resources.

Additional Resources

The following additional Internet resources may help you as you enhance your Web site.

• Creating Custom Behaviors in FrontPage 2003
• JavaScript.com: The Definitive JavaScript Resource
• WebReference JavaScript Articles
• HTML and DHTML Reference